<!-- components/TextInput/TextInput.vue -->
<template>
  <div class="text-input">
    <!-- 标签 -->
    <label v-if="label" :for="uuid" class="text-input__label">
      {{ label }}
    </label>

    <!-- 输入框容器 -->
    <div
        class="text-input__container"
        :class="[sizeClass, { 'is-disabled': disabled, 'is-readonly': readonly }]"
        :style="containerStyle"
    >
      <!-- 前缀 -->
      <span v-if="prefix" class="text-input__prefix">
        {{ prefix }}
      </span>

      <!-- 输入框主体 -->
      <input
          :id="uuid"
          ref="input"
          class="text-input__input"
          :value="modelValue"
          v-bind="$attrs"
          :placeholder="placeholder"
          :disabled="disabled"
          :readonly="readonly"
          :maxlength="maxlength"
          :minlength="minlength"
          :pattern="pattern"
          :aria-label="label || placeholder"
          :aria-invalid="isInvalid"
          @input="handleInput"
          @change="handleChange"
          @focus="handleFocus"
          @blur="handleBlur"
          @keydown="handleKeydown"
          @keyup="handleKeyup"
          @keypress="handleKeypress"
      >

      <!-- 后缀 -->
      <span v-if="suffix" class="text-input__suffix">
        {{ suffix }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const props = defineProps({
  modelValue: { type: [String, Number], default: '' },
  placeholder: { type: String, default: '' },
  disabled: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false },
  size: { type: String, default: 'medium', validator: v => ['small', 'medium', 'large'].includes(v) },
  color: { type: String, default: '#333' },
  borderColor: { type: String, default: '#ccc' },
  maxlength: { type: [Number, String], default: null },
  minlength: { type: [Number, String], default: null },
  pattern: { type: String, default: null },
  label: { type: String, default: '' },
  prefix: { type: String, default: '' },
  suffix: { type: String, default: '' },
});

const emit = defineEmits([
  'update:modelValue',
  'input',
  'change',
  'focus',
  'blur',
  'keydown',
  'keyup',
  'keypress',
]);

// 生成唯一ID用于无障碍访问
const uuid = ref('');
const generateId = () => `input_${Math.random().toString(36).substr(2, 9)}`;
onMounted(() => { uuid.value = generateId(); });

// 样式计算
const sizeClass = computed(() => `size-${props.size}`);
const containerStyle = computed(() => ({
  borderColor: props.borderColor,
  color: props.color,
}));

// 验证状态
const isInvalid = ref(false);

// 事件处理
const handleInput = (e) => {
  emit('update:modelValue', e.target.value);
  emit('input', e.target.value);
  validate(e.target.value);
};

const handleChange = (e) => {
  emit('change', e.target.value);
};

const handleFocus = (e) => {
  emit('focus', e);
};

const handleBlur = (e) => {
  emit('blur', e);
};

const handleKeydown = (e) => emit('keydown', e);
const handleKeyup = (e) => emit('keyup', e);
const handleKeypress = (e) => emit('keypress', e);

// 验证逻辑
const validate = (value) => {
  if (!props.pattern) return;
  const regex = new RegExp(props.pattern);
  isInvalid.value = !regex.test(value);
};
</script>

<style scoped>
.text-input {
  margin-bottom: 1rem;
  width: 100%;
}

.text-input__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--input-label-color, #666);
}

.text-input__container {
  display: flex;
  align-items: center;
  border: 1px solid;
  border-radius: 4px;
  padding: 0 12px;
  transition: border-color 0.3s ease;
}

.text-input__container.size-small { height: 32px; font-size: 12px; }
.text-input__container.size-medium { height: 40px; font-size: 14px; }
.text-input__container.size-large { height: 48px; font-size: 16px; }

.text-input__container.is-disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.text-input__container.is-readonly {
  background-color: #f9f9f9;
}

.text-input__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 8px;
  width: 100%;
}

.text-input__input:disabled { cursor: not-allowed; }

.text-input__prefix,
.text-input__suffix {
  user-select: none;
  color: #999;
}

.text-input__prefix { margin-right: 8px; }
.text-input__suffix { margin-left: 8px; }

/* 错误状态 */
.text-input__container[aria-invalid="true"] {
  border-color: #ff4444 !important;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
</style>